<template>
	<view class="container">
		<customNavigation title="随手汇报" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="tip">
				看到任何你觉得不好的地方，你都可以：
			</view>
			<view class="box box1">
				<view class="title">
					一、简单写几个字...
				</view>
				<view class="boxList">
					<textarea class="textInput" value="" placeholder="填写内容，可以是任何你认为不好的地方" v-model="desc"/>
					<image class="voice_nor" src="../../static/images/sshb_jpg.png" mode=""></image>
				</view>
			</view>
			<view class="box box2">
				<view class="title">
					二、或者，随手拍几张照片...
				</view>
				<view class="boxList">
					<image class="uploadItem" src="../../static/images/sshb_jpg2.png" mode=""></image>
					<image class="uploadItem" @tap.stop="uploadImg" :src="imgList[0]?imgList[0].ImageUrl:icon" mode=""></image>
					<image class="uploadItem" @tap.stop="uploadImg" :src="imgList[1]?imgList[1].ImageUrl:icon" mode=""></image>
					<image class="uploadItem" @tap.stop="uploadImg" :src="imgList[2]?imgList[2].ImageUrl:icon" mode=""></image>
				</view>
			</view>
			<view class="box box3">
				<view class="title">
					三、或者，简单说几句话...
				</view>
				<view class="boxList">
					<view class="uploadAudioBox" @longpress="startRecord()" @touchend="endRecord()">
						<image class="audioIcon" src="../../static/images/sshb_icon_voice_nor.png" mode=""></image>
					</view>
					<image class="sshb_jpg3" src="../../static/images/sshb_jpg3.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btnList">
			<view class="tip">
				再手指简单点一下，改变就将发生...
			</view>
			<view class="btn" @click="SubFhnTo">
				完成，提交
			</view>
		</view>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from "../../utils/controller.js"
	export default {
		components:{
			customNavigation
		},
		data() {
			return {
				desc:"",
				imgList:[],
				audio:"",
				audioSrc:"",
				audioTempFile:"",
				icon:"../../static/images/sshb_icon_picture_nor.png",
				tapAudio:false
			};
		},
		onLoad() {
			this.recorderManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		methods:{
			//开始录音
			startRecord(){
				let that=this
				uni.authorize({
					scope:"scope.record",
					success(){
						uni.showToast({
							icon:"none",
							title:"开始录音"
						})
						that.recorderManager.start();
						that.recorderManager.onStart()
						console.log("录音执行")
					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '您未授权录音，功能将无法使用',
							showCancel: true,
							confirmText: "授权",
							confirmColor: "#52a2d8",
							success(res) {
								if(res.confirm){
									uni.openSetting({
										
									})
								}else{
									
								}
							}
						})
					}
				})
			},
			
			//结束录音
			endRecord(){
				let that=this
				uni.stopRecord({
					success:function(e){
						that.recorderManager.stop();
						that.recorderManager.onStop((res=>{
							that.audioTempFile=res.tempFilePath
							that.uploadAudio()
						}))
						console.log("结束录音")
					}
				})
			},
			
			//录音点击事件
			catchRecord(){
				if(this.tapAudio==false){
					this.tapAudio=true
					this.startRecord()
				}else{
					this.tapAudio=false
					this.endRecord()
				}
			},
			//提交随手报
			SubFhnTo(){
				let value={}
				let list=[]
				this.imgList.forEach(item=>{
					list.push(item.src)
				})
				value.desc=this.desc
				value.attr1=list.join(",")
				value.attr2=this.audioSrc
				api.SubFhnTo(value).then(res=>{
					uni.showToast({
						icon:"none",
						title:"操作成功",
						duration:1500
					})
					setTimeout(function(){
						uni.navigateBack()
					},1500)
				})
			},
			
			//上传图片
			uploadImg(index){
				if(this.imgList.length>=3){
					return
				}
				let that=this
				uni.chooseImage({
					count:1,
					success:function(res){
						let url=res.tempFilePaths[0]
						console.log(res)
						uni.uploadFile({
							url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
							filePath: url,
							name: 'Data',
							formData: {
							   token:uni.getStorageSync("token")             
							           },
							success: (res) => {
								let value={}
								value.src=JSON.parse(res.data).src
								value.ImageUrl=JSON.parse(res.data).ImageUrl
								that.imgList.push(value)
							}
						});
					},
					
				})
			},
			
			//上传语音
			uploadAudio(){
				console.log("触发")
				let that=this
				let url=this.audioTempFile
				uni.uploadFile({
					url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
					filePath: url,
					formData: {
					   token:uni.getStorageSync("token")             
							   },
					name: 'Data',
					success: (res) => {
						uni.showToast({
							icon:"none",
							title:"结束录音"
						})
						console.log(res)
						that.audioSrc=JSON.parse(res.data).src
						that.audio=JSON.parse(res.data).ImageUrl
					}
				});
			}
		}
	}
</script>

<style lang="less">
.container{
	width: 100%;
	height: auto;
	.main{
		width: 100%;
		height: auto;
		margin-top: 11vh;
		.tip{
			width: 100%;
			height: 92rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			line-height: 92rpx;
			font-size: 26rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #666666;
			background-color: #FAFAFA;
		}
		.box{
			width: 100%;
			height: auto;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-top: 52rpx;
			.title{
				margin-bottom: 23rpx;
				font-size: 30rpx;
				font-family: PingFangSC;
				font-weight: 500;
				color: #2A2A2A;
			}
			.boxList{
				width: 100%;
				height: auto;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.textInput{
					width: 413rpx;
					height: 164rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					padding: 25rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					font-family: PingFangSC;
					font-weight: 400;
					color: #666666;
				}
				.voice_nor{
					width: 246rpx;
					height: 129rpx;
				}
				.uploadItem{
					width: 152rpx;
					height: 156rpx;
				}
				.uploadAudioBox{
					width: 413rpx;
					height: 164rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.audioIcon{
						width: 96rpx;
						height: 96rpx;
					}
				}
				.sshb_jpg3{
					width: 152rpx;
					height: 183rpx;
				}
			}
		}
	}
	.btnList{
		position: fixed;
		width: 100%;
		height: 190rpx;
		bottom: 0;
		left: 0;
		.tip{
			width: 100%;
			height: auto;
			font-size: 26rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #32A238;
			text-align: center;
		}
		.btn{
			width: 100%;
			height: 98rpx;
			background: rgba(50, 162, 56, 1);
			position: fixed;
			bottom: 0;
			left: 0;
			text-align: center;
			line-height: 98rpx;
			font-size: 36rpx;
			font-family: PingFangSC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
</style>
